<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>车牌管理系统--用户页面</title>
    <script th:src="@{/elementui/vue2-7.js}"></script>
    <script th:src="@{/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{/elementui/index.css}"/>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }
        .el-aside {
            color: #333;
        }
        .el-avatar{
            display: inline;
        }
    </style>
</head>
<body>

<div id="app" style="height: 725px">
    <!--侧边栏-->
    <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1','3']" default-active="1-1">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-user"></i>个人中心</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="first">基本信息</el-menu-item>
                        <el-menu-item index="1-2" @click="second">修改密码</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="2" @click="third">
                    <template slot="title"><i class="el-icon-postcard" ></i>车牌信息</template>
                </el-menu-item>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>业务办理</template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="fourth">申请车牌</el-menu-item>
                        <el-menu-item index="3-2" @click="fifth">销毁车牌</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <!--右部分主要内容-->
        <el-container>
            <!--顶栏-->
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-switch-button" style="margin-right: 20px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-button @click="logout()"><el-dropdown-item>退出登录</el-dropdown-item></el-button>
                    </el-dropdown-menu>
                </el-dropdown>
                <span ><el-avatar> {{this.userName}} </el-avatar></span>
            </el-header>
            <!--内容部分-->
            <el-main>
                <el-tabs type="border-card" v-model="activeName">
                    <!--基本信息-->
                    <el-tab-pane name="first">
                        <span slot="label"><i class="el-icon-user"></i> 基本信息</span>
                        <el-form ref="userData" :model="userData" :rules="rulesInfo" label-width="80px">
                            <el-form-item label="账 号" prop="account">
                                <el-input v-model="userData.account" disabled="disabled"></el-input>
                            </el-form-item>
                            <el-form-item label="性 别" prop="sex">
                                <el-radio-group v-model="userData.sex">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="密 码" hidden="hidden" prop="password">
                                <el-input v-model="userData.password"></el-input>
                            </el-form-item>
                            <el-form-item label="姓 名" prop="name">
                                <el-input v-model="userData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="年 龄" prop="age">
                                <el-input v-model="userData.age" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="电 话 号" prop="number">
                                <el-input v-model="userData.number"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号" prop="identifyID">
                                <el-input v-model="userData.identifyID"></el-input>
                            </el-form-item>
                            <el-form-item label="住址" prop="address">
                                <el-input type="textarea" v-model="userData.address"></el-input>
                            </el-form-item>
                            <el-form-item label="身 份" hidden="hidden" prop="identify">
                                <el-input v-model="userData.identify"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updateInfo('userData')">修改</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>

                    <!--修改密码-->
                    <el-tab-pane label="修改密码" name="second">
                        <el-form ref="PwdData" :model="PwdData" :rules="rulesPwd" label-width="80px">
                            <el-form-item label="账 号" prop="account" hidden="hidden">
                                <el-input type="text" v-model="PwdData.account" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="PwdData.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="name">
                                <el-input type="password" v-model="PwdData.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updatePwd('PwdData')">修改</el-button>
                                <el-button @click="resetForm('PwdData')">清空</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>

                    <!--车牌信息-->
                    <el-tab-pane name="third">
                        <span slot="label"><i class="el-icon-postcard"></i> 车牌信息</span>
                        <el-table :data="PlateList">
                            <el-table-column prop="id" label="id" width="100"></el-table-column>
                            <el-table-column prop="owner" label="归属人" width="120"></el-table-column>
                            <el-table-column prop="account" label="账号" width="120"></el-table-column>
                            <el-table-column prop="licenseNum" label="车牌号" width="140"></el-table-column>
                            <el-table-column prop="number" label="电话号" width="150"></el-table-column>
                            <el-table-column prop="carType" label="车类型" width="120"></el-table-column>
                            <el-table-column prop="status" label="当前状态" width="180"></el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <!--申请车牌-->
                    <el-tab-pane name="fourth">
                        <span slot="label"><i class="el-icon-menu"></i> 申请车牌</span>
                        <el-form ref="ApplyData" :model="ApplyData" :rules="rulesApply" label-width="80px">
                            <el-form-item label="归 属 人" hidden="hidden">
                                <el-input v-model="ApplyData.owner" ></el-input>
                            </el-form-item>
                            <el-form-item label="账 号" hidden="hidden">
                                <el-input v-model="ApplyData.account" ></el-input>
                            </el-form-item>
                            <el-form-item label="车 牌 号" prop="licenseNum">
                                <el-input v-model="ApplyData.licenseNum"></el-input>
                            </el-form-item>
                            <el-form-item label="电 话 号" prop="number">
                                <el-input v-model="ApplyData.number"></el-input>
                            </el-form-item>
                            <el-form-item label="车的类型" prop="carType">
                                <el-input v-model="ApplyData.carType"></el-input>
                            </el-form-item>
                            <el-form-item label="状态" hidden="hidden">
                                <el-input v-model="ApplyData.status"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="apply('ApplyData')">申请</el-button>
                                <el-button @click="resetForm('ApplyData')">清空</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>

                    <!--销毁车牌-->
                    <el-tab-pane label="销毁车牌" name="fifth">
                        <el-table :data="DestroyData">
                            <el-table-column prop="id" label="id" width="100"></el-table-column>
                            <el-table-column prop="owner" label="归属人" width="120"></el-table-column>
                            <el-table-column prop="account" label="账号" width="120"></el-table-column>
                            <el-table-column prop="licenseNum" label="车牌号" width="140"></el-table-column>
                            <el-table-column prop="number" label="电话号" width="150"></el-table-column>
                            <el-table-column prop="carType" label="车类型" width="120"></el-table-column>
                            <el-table-column prop="status" label="当前状态" width="180"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @click="handleDestroy(scope.row)">申请销毁</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
</html>

<script th:src="@{/js/axios-0.18.0.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    var vue = new Vue({
        el: "#app",
        activeName: "", //展示哪个面板
        userName: "",   //用户姓名
        userAccount: "",    //用户账号
        userData: {},   //用户信息
        PwdData: {},    //密码
        ApplyData: {},  //申请车牌
        DestroyData: [],    //销毁车牌,列表
        PlateList: [],   //车牌列表
        //表单效验

        data() {
            var validatePass = (rule, value, callback) => {
                const acReg = /^[A-Za-z0-9]+$/
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if(acReg.test(value) === false ){
                    callback(new Error("只能输入字母或数字"));
                } else if (value.length < 6 || value.length > 15) {
                    callback(new Error("长度必须在6-15之内!"));
                } else {
                    if (this.PwdData.name !== '') {
                        this.$refs.PwdData.validateField('name');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                const acsReg = /^[A-Za-z0-9]+$/
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if(acsReg.test(value) === false ){
                    callback(new Error("只能输入字母或数字"));
                } else if (value.length < 6 || value.length > 15) {
                    callback(new Error("长度必须在6-15之内!"));
                } else if (value !== this.PwdData.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var validatePassName = (rule, value, callback) => {
                const nameReg = /^[\u4e00-\u9fa5]{0,}$/g
                if (value === "") {
                    callback(new Error("请输入真实姓名"));
                } else if(nameReg.test(value) === false ){
                    callback(new Error("只能输入中文"));
                } else if (value.length <2 || value.length > 5) {
                    callback(new Error("长度必须在2-5之内!"));
                } else {
                    callback();
                }
            };
            var validatePassAge = (rule, value, callback) => {
                const ageReg = /^[1-9]\d*$/
                if (value === "") {
                    callback(new Error("请输入年龄"));
                }else if (ageReg.test(value) === false ){
                    callback(new Error("应为正整数"));
                } else if(value.length !== 2){
                    callback(new Error("年龄长度不合法"))
                }else {
                    callback();
                }
            };
            var validatePassArr = (rule, value, callback) => {

                if (value === "") {
                    callback(new Error("请输入住址"));
                } else if (value.length < 6 || value.length > 15) {
                    callback(new Error("长度必须在6-15之内!"));
                } else {
                    callback();
                }
            };
            var validatePassNum = (rule, value, callback) => {
                const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
                if (value === "") {
                    callback(new Error("请输入电话号"));
                } else if (phoneReg.test(value) === false) {
                    callback(new Error('电话号码格式不正确'))
                } else if (value.length !== 11) {
                    callback(new Error("长度为11位!"));
                } else {
                    callback();
                }
            };
            var validatePassIde = (rule, value, callback) => {
                const identifyReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                const  rega = /^[A-Za-z0-9]+$/
                if (value === "") {
                    callback(new Error("请输入身份证号码"));
                } else if (rega.test(value) === false ){
                    callback(new Error('只能输入字母或数字'))
                } else if(identifyReg.test(value) === false){
                    callback(new Error('身份证号格式不正确'))
                } else {
                    callback();
                }
            };
            return {
                activeName: "first",
                userData: {
                    account: "",
                    password: "",
                    sex: "",
                    name: "",
                    age: "",
                    address: "",
                    number: "",
                    identifyID: "",
                    identify: "用户",
                },
                PwdData: {
                    account: "",
                    password: "",
                    name: "",
                },
                ApplyData: {
                    owner: "",
                    account: "",
                    licenseNum: "",
                    number: "",
                    carType: "",
                    status: "登记车牌申请中",
                },
                PlateList: [],
                DestroyData: [],
                rulesInfo: {
                    name: [{ validator: validatePassName, trigger: 'blur' ,required: true  }],
                    age: [{ validator: validatePassAge, trigger: 'blur' ,required: true  }],
                    number: [{ validator: validatePassNum, trigger: 'blur' ,required: true  }],
                    identifyID: [{ validator: validatePassIde, trigger: 'blur' ,required: true  }],
                    address: [{ validator: validatePassArr, trigger: 'blur' ,required: true  }],
                },
                rulesPwd:{
                    password: [{ validator: validatePass, trigger: 'blur' ,required: true},],
                    name: [{ validator: validatePass2, trigger: 'blur' ,required: true},],
                },
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],

                rulesApply:{
                    licenseNum: [
                        { required:true, message: '请输入车牌号', trigger: 'blur' },
                        { min: 7, max: 7, message: '车牌号不正确', trigger: 'blur' },
                    ],
                    number: [
                        { required:true, message: '请输入电话号', trigger: 'blur' },
                        { min: 11, max: 11, message: '电话号不正确', trigger: 'blur' },
                        { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '不合法', trigger: 'blur' },
                    ],
                    carType: [
                        { required:true, message: '请输入车牌号', trigger: 'blur' },
                        { min: 2, max: 6, message: '长度2~6', trigger: 'blur' },
                    ],
                },
            }
        },

        //钩子函数
        created(){
            this.showUser();    //进入主页展示数据
            this.resetForm('PwdData');  //清除密码数据
            this.showPlate();   //展示车牌数据
            this.showOwner();   //展示已拥有车牌

        },

        methods:{
            //展示用户数据
            showUser(){
                axios.get("/user").then((response)=>{
                    if (response.data.code === 20041){
                        this.userData = response.data.data;     //将用户数据放到页面表单data中
                        this.userName = response.data.data.name;    //姓名
                        this.userAccount = response.data.data.account;  //账号
                    }else {
                        this.$message.info("查询用户数据失败，请刷新试试！");
                    }
                });
            },

            //更新用户信息
            updateInfo(userForm){
                this.$refs[userForm].validate((valid) => {
                    if (valid) {
                        this.$confirm("是否确定要修改信息", "提示", {
                            type: 'info'
                        }).then(()=>{
                            axios.put("/user",this.userData).then((response)=>{
                                if(response.data.code === 20031){
                                    this.$message.success("更新信息成功!");
                                    this.userData = response.data.data;     //更新用户表单
                                    this.resetForm('userData');
                                    this.showUser();    //更新用户展示
                                    this.showPlate();   //更新车牌展示
                                    this.showDestroy(); //
                                }else{
                                    this.$message.info("更新信息失败！");
                                }
                            });
                        })
                    } else {
                        this.$message.info("请填写正确的信息！");
                        console.log("error submit!!");
                        return false;
                    }
                });
            },

            //更新用户密码
            updatePwd(PwdForm){
                this.$refs[PwdForm].validate((valid) => {
                    if (valid) {
                        this.$confirm("是否确定要修改密码", "提示", {
                            type: 'info'
                        }).then(()=>{
                            axios.put("/user/updatePwd",this.PwdData).then((response)=>{
                                if(response.data.code === 20031){
                                    this.$message.success("更新密码成功!");
                                    this.resetForm('PwdData');
                                }else{
                                    this.$message.info("更新密码失败！");
                                }
                            });
                        })
                    } else {
                        this.$message.info("请输入正确的密码！");
                        console.log("error submit!!");
                        return false;
                    }
                });
            },

            //查询车牌信息
            showPlate(){
                axios.get("/car").then((response)=>{
                    if (response.data.code === 20041){
                        this.PlateList = response.data.data;     //将用户数据放到页面表单data中
                    }else {
                        this.$message.info("查询用户车牌数据失败，请刷新试试！");
                    }
                })
            },

            //申请车牌
            apply(){
                this.$confirm("是否确定提交申请", "提示", {
                    type: 'info'
                }).then(()=> {
                    axios.post("/car/apply", this.ApplyData).then((response) => {
                        if (response.data.code === 20031) {
                            // this.$message.success("添加申请成功");
                            this.$notify({
                                title: '提示',
                                message: '添加申请成功',
                                type: 'success'
                            });
                            this.resetForm('ApplyData');     //清空
                            this.showPlate();   //更新数据
                        } else if (response.data.code === 500250){
                            this.$notify({
                                title: '提示',
                                message: response.data.msg,
                                type: 'error'
                            });
                        }else{
                            this.$notify({
                                title: '提示',
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    }).finally(() => {
                        this.resetForm('ApplyData');     //清空
                    });
                }).catch(() => {
                    //取消按钮
                    // this.$message.info("已取消删除");
                    this.$notify({
                        title: '提示',
                        message: '已取消申请',
                        type: 'info'
                    });
                });
            },

            //展示已存在的车牌数据
            showOwner(){
                axios.get("/car/getHave").then((response)=>{
                    if (response.data.code === 20041){
                        this.DestroyData = response.data.data;
                    }else {
                        this.$message.info("查询用户车牌数据失败，请刷新试试！");
                    }
                })
            },

            //销毁车牌，修改status
            handleDestroy(row){
                //弹出提示框
                this.$confirm("是否确定提交销毁申请", "提示", {
                    type: 'info'
                }).then(() => {
                    //确定按钮
                    axios.put("/car/applyDestroy" , row).then((response) => {
                        if (response.data.code === 20031) {
                            // this.$message.success("提交销毁申请成功");
                            this.$notify({
                                title: '提示',
                                message: '提交销毁申请成功',
                                type: 'success'
                            });
                        } else if (response.data.code === 20030) {
                            // this.$message.info("提交销毁申请失败");
                            this.$notify({
                                title: '提示',
                                message: '提交销毁申请失败',
                                type: 'error'
                            });
                        }else {
                            // this.$message.error(response.data.msg);
                            this.$notify({
                                title: '提示',
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    }).finally(() => {
                        this.showOwner();
                        this.showPlate();
                    });
                }).catch(() => {
                    //取消按钮
                    // this.$message.info("已取消删除");
                    this.$notify({
                        title: '提示',
                        message: '已取消申请销毁',
                        type: 'info'
                    });
                });
            },

            //退出登录
            logout(){
                this.$confirm("是否确定要退出登录", "提示", {
                    type: 'info'
                }).then(()=>{
                    axios.get("/user/logout").then(async (response) => {
                        if (response.data.code === 20061) {
                            this.$message.success("退出登录中...");
                            await this.sleep(1000);
                            window.location.href = "/index";
                        } else {
                            this.$message.info("退出失败!");
                        }
                    });
                }).catch(() =>{
                    //取消退出
                    this.$message.info("已取消退出登录");
                });
            },

            //侧边栏点击效果，展示对应面板
            first(){
                this.activeName = "first";
            },
            second(){
                this.activeName = "second";
            },
            third(){
                this.activeName = "third";
            },
            fourth(){
                this.activeName = "fourth";
            },
            fifth(){
                this.activeName = "fifth";
            },

            //睡眠
            sleep(time) {
                return new Promise(resolve => setTimeout(resolve, time));
            },
            //重置表单信息
            resetForm(formName) {
                setTimeout(()=>{
                    this.$refs[formName].resetFields();
                },0);
            },
        }
    });

</script>